<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <div style="position: absolute; left: 18px; top: 18px">
      <button @click="capture">截图</button>
    </div>
  </div>
</template>

<script>
// let html2canvas = require("../utils/html2canvas.js");
/* eslint-disable */
let imageurl = require("../assets/target/装甲车.svg");
let imageurl1 = require("../assets/target/装甲车.svg");
let imageurl2 = require("../assets/target/坦克.svg");
let imageurl3 = require("../assets/target/火炮.svg");
let imageurl4 = require("../assets/target/人员.svg");
let imageurl5 = require("../assets/target/船舰.svg");
let imageurl6 = require("../assets/target/桥梁.svg");
let imageurl7 = require("../assets/target/飞机.svg");
import { baseService } from "@/utils/configHttp";
let lastTime = null;
let lastPosition = {
  longitude: "",
  latitude: "",
};
export default {
  data() {
    return {
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      _bgImagery: undefined,
      imageurl: "../assets/target/装甲车.svg",
      _viewer: null,
    };
  },
  computed: {
    coordinate() {
      return this.$store.state.app.coordinate;
    },
  },
  watch: {
    // "$store.state.app.coordinate": {
    //   handler(n, o) {
    //     console.log(89898989, n, o);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    coordinate: {
      handler(data) {
        console.log(89898989, data);
        if (this._viewer) {
          this._viewer.entities.removeAll();
          data.forEach((item) => {
            imageurl = imageurl4;
            // if (item.type == 0) {
            //   imageurl = imageurl1;
            //   // console.log(8888, imageurl);
            // }
            // if (item.type == 1) {
            //   imageurl = imageurl2;
            // }
            // if (item.type == 2) {
            //   imageurl = imageurl3;
            // }
            // if (item.type == 3) {
            //   imageurl = imageurl4;
            // }
            // if (item.type == 4) {
            //   imageurl = imageurl5;
            // }
            // if (item.type == 5) {
            //   imageurl = imageurl6;
            // }
            // if (item.type == 6) {
            //   imageurl = imageurl7;
            // }
            this.AddPoint(this._earth, {
              longitude: item.lng,
              latitude: item.lat,
              // height: 524.57,
              imageurl: imageurl,
            });
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    if (typeof XE !== "undefined") {
      // 1.1.1 创建地球
      var earth = new XE.Earth(this.$refs.earthContainer, {
        contextOptions: {
          webgl: {
            // alpha: true,
            // depth: true,
            // stencil: true,
            // antialias: true,
            // premultipliedAlpha: true,
            //通过canvas.toDataURL()实现截图需要将该项设置为true
            preserveDrawingBuffer: true,
            // failIfMajorPerformanceCaveat: true,
          },
        },
      });

      // 1.1.2 添加默认地球影像
      earth.sceneTree.root = {
        children: [
          {
            czmObject: {
              name: "默认离线影像",
              xbsjType: "Imagery",
              xbsjImageryProvider: {
                createTileMapServiceImageryProvider: {
                  url: XE.HTML.cesiumDir + "Assets/Textures/NaturalEarthII",
                  fileExtension: "jpg",
                },
                type: "createTileMapServiceImageryProvider",
              },
              // XbsjImageryProvider: {
              //   url:
              //     "192.168.1.181:31703/smallMap/sw/" +
              //     "mapData/{x}/{y}/{z}.png",
              //   // srcCoordType: "GCJ02",
              //   // dstCoordType: "WGS84",
              //   // maximumLevel: 18,
              // },
            },
          },
        ],
      };
      this._earth = earth;
      this._viewer = earth.czm.viewer;
    } else if (typeof Cesium !== "undefined") {
      let viewer = new Cesium.Viewer(this.$refs.earthContainer);
    }
  },
  methods: {
    AddPoint(earth, e) {
      var pinBuilder = new Cesium.XbsjPinBuilder();
      const entity = earth.czm.viewer.entities.add({
        id: e.id,
        position: Cesium.Cartesian3.fromDegrees(
          e.longitude,
          e.latitude
          // e.height
        ),
        billboard: {
          image: e.imageurl,
          width: 60,
          height: 70,
          // color: new Cesium.Color(1, 0, 0, 1),
          verticalOrigin: Cesium.VerticalOrigin.MIDDLE,
          scale: 1,
          show: true,
        },
        // label: {
        //   text: e.value,
        //   style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        //   font: "20px 微软雅黑",
        //   fillColor: Cesium.Color.WHITE,
        //   outlineColor: Cesium.Color.BLACK,
        //   outlineWidth: 6,
        //   scale: 1,
        //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        // },
      });
      if (
        // (new Date().getTime() - lastTime > 3000 &&
        //   (lastPosition.longitude != e.longitude ||
        //     lastPosition.latitude != e.latitude)) ||
        // !lastTime
        !lastTime
      ) {
        console.log(99999);
        var position = Cesium.Cartesian3.fromDegrees(e.longitude, e.latitude);
        earth.czm.viewer.camera.flyToBoundingSphere(
          new Cesium.BoundingSphere(position, 3000000)
        );
        lastTime = new Date().getTime();
        lastPosition = e;
      }
      // earth.czm.viewer.flyTo(entity, {
      //   offset: {
      //     heading: Cesium.Math.toRadians(0.0),
      //     pitch: Cesium.Math.toRadians(-25),
      //     range: 50000,
      //   },
      // });
      return entity;
    },
    capture() {
      // html2canvas(document.querySelector(".cesium-widget")).then(function (
      //   canvas
      // ) {
      //   let src = canvas.toDataURL("image/jpeg");
      //   console.log(8888, src);
      //   baseService
      //     .post("/screenShort", {
      //       type: "mbst",
      //       base64: src,
      //     })
      //     .then((res) => {
      //       console.log(890, res);
      //     })
      //     .catch((err) => {
      //       alert(err.msg);
      //     });
      // });
      // console.log(7777, document.querySelector("canvas"));
      let src = document.querySelector("canvas").toDataURL("image/jpeg");
      console.log(8888, src);
      baseService
        .post("/screenShort", {
          type: "MBST",
          base64: src,
        })
        .then((res) => {
          console.log(890, res);
        })
        .catch((err) => {
          alert(err.msg);
        });
    },
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  },
};
</script>